<template>
    <div class="grid-content bg-purple" style="height: 321px;">
        <el-card class="box-card" style="display: flex;flex-direction: column;">
            <div slot="header" class="clearfix">
                <i class="el-icon-data-analysis" style="font-size: 20px;color: rgb(4, 4, 159);"></i>
                <span>用户概况</span>
            </div>
            <div class="myel-card__body">
                <el-card class="box-card" style="height: 150px;margin: 0;">
                    <div style="height: 110px;display: flex;justify-content: space-between;flex-direction: column;">
                        <p><span>商户数</span><i class="el-icon-magic-stick" style="float: right;"></i></p>
                        <animate-number v-if="number[0]" class="grid-num" :from="1" :to="number[0]" duration="1000"></animate-number>
              
                    </div>
                </el-card>
                <el-card class="box-card" style="height: 150px;margin: 0;">
                    <div style="height: 110px;display: flex;justify-content: space-between;flex-direction: column;">
                        <p><span>新增用户数</span><i class="el-icon-magic-stick" style="float: right;"></i></p>
                        <animate-number v-if="number[1]" class="grid-num" :from="1" :to="number[1]" duration="1000"></animate-number>
                    </div>
                </el-card>
                <el-card class="box-card" style="height: 150px;margin: 0;">
                    <div style="height: 110px;display: flex;justify-content: space-between;flex-direction: column;">
                        <p><span>累计用户数</span><i class="el-icon-magic-stick" style="float: right;"></i></p>
                        <animate-number v-if="number[1]" class="grid-num" :from="1" :to="number[1]" duration="1000"></animate-number>
                    </div>
                </el-card>
            </div>

        </el-card>
    </div>
</template>

<script>
import { selectIndent } from '@/api/dashboard'
export default {
    props: ['childtime'],
    data() {
        return {
            endtime: '',
            number: []
        }
    },
    mounted() {
        this.endtime = this.childtime
        this.handleechart1()
    },
    methods: {
        async handleechart1() {
            let list = ['/selectMerchantCount','/selectUserCount']
            for (let i = 0; i < list.length; i++) {
           

                if (this.endtime) {
                    this.endtime = this.$day(this.endtime).format('YYYY-MM-DD')
                } else {
                    this.endtime = this.$day(new Date()).format('YYYY-MM-DD')
                }
                let obj = {
                    endtime: this.endtime
                }
                const param = new URLSearchParams(obj)
                const res = await selectIndent(list[i], param)
                // console.log(res.data);
                this.number.push(res.data)
            }
        }
    }
}
</script>

<style  scoped>

    ::v-deep .el-card__body{
        padding: 15px;
    }
</style>